<template>
  <el-form-item label="数据选项">
    <draggable :list="value.options" :animation="340" group="selectItem" handle=".option-drag">
      <div v-for="(item, index) in value.options" :key="index" class="select-item">
        <div class="select-line-icon option-drag">
          <i class="el-icon-s-operation" />
        </div>
        <el-input v-model="item.value" placeholder="选项名" size="small" />
        <el-input class="hidden" placeholder="选项值" size="small" :value="item.value"
          @input="setOptionValue(item, $event)" />
        <div class="close-btn select-line-icon" @click="value.options.splice(index, 1)">
          <i class="el-icon-remove-outline" />
        </div>
      </div>
    </draggable>
    <div style="margin-left: 20px;">
      <el-button style="padding-bottom: 0" icon="el-icon-circle-plus-outline" type="text" @click="addSelectItem">
        添加选项
      </el-button>
    </div>
  </el-form-item>
</template>

<script>
  export default {
    props: {
      value: {
        type: Object,
        default: null
      },
    },
    data() {
      return {
        sp: {},
        sr: {},
        param: {}
      }
    },
    created(options) {
      let that = this;
      that.xinit();
    },
    methods: {
      xinit() {
        let that = this;
      },
      addSelectItem() {
        this.value.options.push({
          label: '',
          value: ''
        })
      },
    }
  }
</script>

<style>
  .select-item {
    display: flex;
    border: 1px dashed #fff;
    box-sizing: border-box;

    & .close-btn {
      cursor: pointer;
      color: #f56c6c;
    }

    & .el-input+.el-input {
      margin-left: 4px;
    }
  }

  .select-item+.select-item {
    margin-top: 4px;
  }

  .select-item.sortable-chosen {
    border: 1px dashed #409eff;
  }

  .select-line-icon {
    line-height: 32px;
    font-size: 22px;
    padding: 0 4px;
    color: #777;
  }

  .option-drag {
    cursor: move;
  }

  .hidden {
    display: none;
  }
</style>
